<template>
  <div>
    <div class="navBar">
      <van-nav-bar
        ref="navBar"
        @click-right="onClickRight($route.query.property)"
        :title="title"
        @click-left="routerBack($route.query.property)"
        left-arrow
        right-text="保存"
      />
    </div>
    <div class="mainBox">
      <!-- 这个是上传图片用的 -->
      <van-uploader
        v-model="fileList"
        v-if="$route.query.property === 'avatar'"
        :after-read="afterRead"
      />
      <!-- 这个是输入框 -->
      <van-cell-group v-else inset>
        <van-field v-model="value" />
      </van-cell-group>
    </div>
  </div>
</template>

<script>
import { eidtInfoAPI } from '@/api/personal'
// import Toast from 'vant'
import { mapState, mapActions } from 'vuex'
export default {
  name: 'editInfo',
  data () {
    return {
      value: '',
      title: '',
      fileList: [
        { url: 'https://img1.baidu.com/it/u=1682079686,16321901&fm=253&fmt=auto&app=138&f=JPEG?w=650&h=413', isImage: true }
      ]
    }
  },
  created () {
    if (this.$route.query.property === 'nickname') {
      this.title = '修改用户名'
      this.value = this.nickname
    } else if (this.$route.query.property === 'position') {
      this.title = '修改职位'
      this.value = this.position
      console.log(this.$refs)
    } else if (this.$route.query.property === 'intro') {
      this.title = '修改个人简介'
      this.value = this.intro
    } else {
      this.title = '修改头像'
      this.value = this.avatar
    }
  },
  // 这是映射在module里面的state
  computed: {
    ...mapState({
      nickname: (state) => state.personal.data.nickname,
      avatar: (state) => state.personal.data.avatar,
      position: (state) => state.personal.data.position,
      intro: (state) => state.personal.data.intro
    })
  },
  methods: {
    ...mapActions('personal', ['updateList']),
    afterRead (file) {
      // 此时可以自行将文件上传至服务器
      console.log(file)
      this.value = this.fileList.url
      // console.log(this.fileList)
    },
    // 这里navbar做按钮跳转的函数
    routerBack (num) {
      if (num === 'position') { this.$router.push('./info') } else { this.$router.back() }
    },
    async onClickRight (num) {
      if (num === 'nickname') {
        const res = await eidtInfoAPI({ nickname: this.value })
        console.log(res)
        this.updateList()
      } else if (num === 'intro') {
        const res = await eidtInfoAPI({ intro: this.value })
        console.log(res)
        this.updateList()
      } else if (num === 'position') {
        const res = await eidtInfoAPI({ position: this.value })
        console.log(res)
        this.updateList()
      } else {
        console.log('这里是修改图片')
        const res = await eidtInfoAPI({ avatar: this.value })
        console.log(res)
        this.updateList()
      }
      this.$toast.success('修改成功')
    }
  }
}
</script>

<style lang="less" scoped>
.mainBox {
  ::v-deep .van-cell-group {
    width: 100%;
  }
  display: flex;
  text-align: center;
  justify-content: space-around;
  padding-top: 15px;
  ::v-deep .van-cell {
    background-color: #f7f4f5;
  }
  ::v-deep .van-uploader__upload {
    width: 200px;
    height: 200px;
    border-radius: 5%;
  }
  ::v-deep .van-uploader__wrapper {
    position: relative;
    .van-image {
      width: 200px;
      height: 200px;
      border-radius: 5%;
      position: absolute;
      z-index: 1;
      left: 7px;
    }
  }
}
</style>
